import React from "react";
import { BookText } from "lucide-react";
import { Label } from "@/components/ui/label";

const CompilationBasis = ({ localTemplate, handleBasisChange, allStandards }) => {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold flex items-center gap-2">
        <BookText className="w-5 h-5 text-green-600" />
        关联标准规范
      </h3>
      <div className="max-h-96 overflow-y-auto p-4 bg-gray-50 rounded-lg border space-y-3">
        {allStandards.length > 0 ? (
          allStandards.map((standard) => (
            <div
              key={standard.id}
              className="flex items-center gap-3 p-2 bg-white rounded-md border"
            >
              <input
                type="checkbox"
                id={`standard-${standard.id}`}
                checked={(localTemplate.compilationBasisIds || []).includes(standard.id)}
                onChange={(e) => handleBasisChange(standard.id, e.target.checked)}
                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 shrink-0"
              />
              <label
                htmlFor={`standard-${standard.id}`}
                className="flex-1 cursor-pointer"
              >
                <p className="font-medium text-sm text-gray-800">
                  {standard.name}
                </p>
                <p className="text-xs text-gray-500">
                  {standard.code}
                </p>
              </label>
            </div>
          ))
        ) : (
          <div className="text-center py-4 text-gray-500">
            <p>暂无可用标准规范，请先在后台录入。</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default CompilationBasis;
